import { useRef, useState, useEffect } from 'react'
import { Form, Input, Button, message } from 'antd'
import { useSelector } from 'react-redux'
import bus from '../../../../utils/eventBus'
import { DownloadOutlined } from '@ant-design/icons'
import LdPrintTable from '../../../../components/LdPrintTable'
import { uid } from 'uid'
import './index.scss'
const OperationLog = () => {
    const { id = '' } = useSelector((state: any) => state.userReducer.userInfo)
    const formRef = useRef<any>(null)
    const pageConfig = useRef<{ currentPage: number, total: number, pageSize: number }>({
        currentPage: 1,
        total: 0,
        pageSize: 10
    })
    const [data, setData] = useState<any[]>()
    const [multipleSelection, setMultipleSelection] = useState<any[]>([])
    const columns = useRef<any[]>([
        { key: 'oper', dataIndex: 'oper', title: '用户名称', width: 100 },
        { key: 'userType', dataIndex: 'userType', title: '用户类型', width: 100 },
        { key: 'opDetail', dataIndex: 'opDetail', title: '事件名称' },
        { key: 'time', dataIndex: "time", title: '完成时间', width: 100 },
        {
            key: 'status',
            dataIndex: 'status',
            title: '状态',
            width: 100,
            render: (_: any, record: any) => {
                return (
                    <span>{record.status ? '成功' : '失败'}</span>
                )
            }
        },
        {
            key: 'action',
            dataIndex: 'action',
            width: 100,
            title: '操作',
            render: (_: any, record: any) => {
                return (
                    <>
                        {record.faceBase64 ? <Button type="link" onClick={() => handleViewFace(record)}>查看人脸</Button> : null}
                    </>
                )
            }
        }
    ])
    const handleViewFace = (data: any) => { }
    const exportOpLogFinished = (data: any) => {
        if (data.code === 200) {
            message.success(data.msg);
        } else {
            message.error(data.msg);
        }
    }
    const handleExport = () => {
        const { keyword } = formRef.current.getFieldsValue()
        window.chromePro.exportOpLog(
            JSON.stringify({
                keyword,
                data: multipleSelection,
            })
        );
    }
    const selectRowChange = (val: Array<any>) => {
        setMultipleSelection(val)
    }
    const handlePage = (data: any) => {
        pageConfig.current = { ...pageConfig.current, ...data }
        loadData()
    }
    const getOpLogListFinished = (res: any) => {
        if (res.code === 200) {
            res.data.map((item: any) => {
                item.id = uid()
            })
            setData(res.data)
            pageConfig.current = { ...pageConfig.current, total: res.total }
        } else {
            message.error(res.msg);
        }
    }
    const loadData = () => {
        const { keyword } = formRef.current.getFieldsValue()
        window.chromePro.getOpLogList(
            JSON.stringify({
                ...pageConfig.current,
                keyword,
                responsible: id
            })
        );
    }
    const formChange = () => {
        pageConfig.current = { ...pageConfig.current, currentPage: 1 }
        loadData()
    }
    useEffect(() => {
        bus.addListener("getOpLogListFinished", getOpLogListFinished);
        bus.addListener("exportOpLogFinished", exportOpLogFinished);
        loadData();
    }, [])
    useEffect(() => {
        return () => {
            bus.removeListener("exportOpLogFinished", exportOpLogFinished);
            bus.removeListener("getOpLogListFinished", getOpLogListFinished);
        }
    }, [])
    return (
        <>
            <div className="h100 w100">
                <div className="filter flex-between mb-10">
                    <Form ref={formRef} onValuesChange={formChange}>
                        <Form.Item name="keyword">
                            <Input allowClear placeholder='请输入关键字检索' style={{ width: '240px' }}
                                className="custom-input" />
                        </Form.Item>
                    </Form>
                    <Button onClick={handleExport} icon={<DownloadOutlined />} type="primary" className="exportBtn">导出</Button>
                </div>
                <div style={{ height: 'calc(100% - 42px)' }}>
                    <LdPrintTable selectRowChange={selectRowChange} handlePage={handlePage} columns={columns.current} data={data} pageConfig={pageConfig.current}></LdPrintTable>
                </div>
            </div>
        </>
    )
}
export default OperationLog